<template>
        <div class="main-div">
                <div class="left-div">
                        <ul>
                                <li v-for=" item in list" :key="item.id">
                                        <!-- <RouterLink :to="`/news/detail/${item.id}/${item.content}/${item.author}`">{{item.content}}</RouterLink> -->
                                        <RouterLink :to="{
                                                name:'xiang',
                                                params: {
                                                        id: item.id,
                                                        content: item.content,
                                                        author: item.author

                                                }
                                        }">{{ item.content }}</RouterLink>
                                </li>
                        </ul>
                </div>
                <div class="right-div">
                        <RouterView></RouterView>
                </div>
        </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { RouterLink, RouterView } from 'vue-router';

let list = reactive([
        { id: 1, content: '花海', author: '周杰伦' },
        { id: 2, content: '水星计', author: '郭顶' },
        { id: 3, content: '凄美地', author: '郭顶' }
])
</script>
<style scoped>
.main-div {
        height: 100%;
        display: flex;
        flex-direction: row;
}

.left-div {
        width: 30%;
        border: 1px solid black;
        margin: 10px;
}

.right-div {
        width: 70%;
        border: 1px solid black;
        margin: 10px;
}
</style>